* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  margin: 20px auto 10px auto;
  text-align: center;
}
h1 {
  font-weight: 100;
  font-size: 32px;
}
.level {
  margin: 5px auto;
}

.level > button {
  width: 60px;
  height: 30px;
  border: none;
  outline: none;
  font-weight: 100;
  font-size: 16px;
  border-radius: 5px;
  margin: 0 10px 0 10px;
  background: #008c8c;
  color: #fff;
  cursor: pointer;
}
.level > button.active {
  background: pink;
}

.info {
  font-size: 16px;
  font-weight: 100;
  margin: 5px auto;
}

table {
  background: #929196;
  margin: 0 auto;
  border-spacing: 1px;
}
table td {
  width: 24px;
  height: 24px;
  background: #ccc;
  border: 2px solid;
  border-color: #fff #a1a1a1 #a1a1a1 #fff;
  text-align: center;
  line-height: 24px;
  font-weight: bold;
  cursor: pointer;
}

td > div {
  width: 100%;
  height: 100%;
}

td > div.mine {
  background: #ccc url(../img/dilei.png) center/cover no-repeat;
  opacity: 0.2;
}
td > div.flag {
  background: #ccc url(../img/qizhi.png) center/cover no-repeat;
  opacity: 1;
}

td > div.error {
  background-color: yellow;
}
td > div.right {
  background-color: #008c8c;
}

/* 不同数字对应的颜色 */
td > div.zero {
  border-color: #d9d9d9;
  background: #d9d9d9;
  /* background: pink; */
}
td > div.one {
  border-color: #d9d9d9;
  background: #d9d9d9;
  color: #0332fe;
}
td > div.two {
  border-color: #d9d9d9;
  background: #d9d9d9;
  color: #019f02;
}
td > div.three {
  border-color: #d9d9d9;
  background: #d9d9d9;
  color: #ff2600;
}
td > div.four {
  border-color: #d9d9d9;
  background: #d9d9d9;
  color: #93208f;
}
td > div.five {
  border-color: #d9d9d9;
  background: #d9d9d9;
  color: #ff7f29;
}
td > div.six {
  border-color: #d9d9d9;
  background: #d9d9d9;
  color: #ff3fff;
}
td > div.seven {
  border-color: #d9d9d9;
  background: #d9d9d9;
  color: #3fffbf;
}
td > div.eight {
  border-color: #d9d9d9;
  background: #d9d9d9;
  color: #22ee0f;
}
